<!--
 * @Description:
 * @Author: william
 * @Date: 2025-02-17 16:47:40
 * @LastEditors: william
 * @LastEditTime: 2025-06-27 11:13:06
-->
<template>
  <BaseDialog
    v-model="dialogVisible"
    :title="title"
    width="850px"
    :before-close="handleClose"
  >
    <el-descriptions
      v-loading="viewLoading"
      :column="2"
      border
      :label-width="140"
    >
      <el-descriptions-item width="200">
        <template #label>{{ $t('fleet.orderNumber') }}</template>
        {{ formData.id || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('fleet.customerName') }}</template>
        {{ formData.customerName || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('fleet.customerContact') }}</template>
        {{ formData.customerContact || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('fleet.contactPhone') }}</template>
        {{ formData.customerContactPhone || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('fleet.customerEmail') }}</template>
        {{ formData.customerContactEmail || '--' }}
      </el-descriptions-item>
    </el-descriptions>
    <BaseTable
      ref="refTravelTable"
      :data="formData.tripInfo"
      row-key="id"
      style="margin: 10px 0"
    >
      <TableColumn :label="$t('fleet.departure')" class="ignore">
        <TableColumn
          prop="startRegionCode"
          :label="$t('public.region')"
          :column-width="travelColumnWidth.startRegionCode"
        >
          <template #default="{ row }">
            <span>{{ g_utils.getRegionName(row.startRegionCode) }}</span>
          </template>
        </TableColumn>
        <TableColumn
          prop="startAddress"
          :label="$t('public.detailAddress')"
          :column-width="travelColumnWidth.startAddress"
        />
      </TableColumn>
      <TableColumn :label="$t('fleet.destination')" class="ignore">
        <TableColumn
          prop="endRegionCode"
          :label="$t('public.region')"
          :column-width="travelColumnWidth.endRegionCode"
        >
          <template #default="{ row }">
            <span>{{ g_utils.getRegionName(row.endRegionCode) }}</span>
          </template>
        </TableColumn>
        <TableColumn
          prop="endAddress"
          :label="$t('public.detailAddress')"
          :column-width="travelColumnWidth.endAddress"
        />
      </TableColumn>
      <TableColumn
        prop="startTime"
        :label="$t('fleet.departureTime')"
        :column-width="travelColumnWidth.startTime"
      />
      <TableColumn
        prop="endTime"
        :label="$t('public.endTime')"
        :column-width="travelColumnWidth.endTime"
      />
      <TableColumn
        prop="kilometres"
        :label="$t('fleet.travelDistance')"
        :column-width="travelColumnWidth.kilometres"
      >
        <template #default="{ row }"
          >{{ row.kilometres }}{{ $t('fleet.kilometer') }}</template
        >
      </TableColumn>
    </BaseTable>
    <el-descriptions
      v-loading="viewLoading"
      :column="2"
      border
      :label-width="140"
    >
      <!-- <el-descriptions-item width="200">
        <template #label>{{ $t('fleet.departure') }}</template>
        <span>{{
          g_utils.getRegionName(formData.tripInfo?.startRegionCode) || '--'
        }}</span>
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('fleet.destination') }}</template>
        <span>{{
          g_utils.getRegionName(formData.tripInfo?.endRegionCode) || '--'
        }}</span>
      </el-descriptions-item> -->
      <!-- <el-descriptions-item width="200">
        <template #label>{{ $t('public.startTime') }}</template>
        {{ formData.createTime || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('public.endTime') }}</template>
        {{ formData.endTime || '--' }}
      </el-descriptions-item> -->
      <el-descriptions-item width="200">
        <template #label>{{ $t('fleet.travelDays') }}</template>
        {{ g_utils.formatValue(formData.days) }}{{ $t('public.sky') }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('fleet.travelDistance') }}</template>
        {{ g_utils.formatValue(formData.kilometres)
        }}{{ $t('fleet.kilometer') }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('fleet.travelerCount') }}</template>
        {{ g_utils.formatValue(formData.peopleCount) }}
      </el-descriptions-item>
      <!-- <el-descriptions-item width="200">
        <template #label>{{ $t('fleet.roundTrip') }}</template>
        <span>{{
          g_options.getOptionText(
            g_options.roundTripOptions,
            formData.isReturn,
            '--'
          )
        }}</span>
      </el-descriptions-item> -->
      <el-descriptions-item width="200">
        <template #label>{{ $t('public.createTime') }}</template>
        {{ formData.createTime || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200" :span="2">
        <template #label>{{ $t('fleet.bookingDesc') }}</template>
        {{ formData.note || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200" :span="2">
        <template #label>{{ $t('public.remark') }}</template>
        {{ formData.remark || '--' }}
      </el-descriptions-item>
    </el-descriptions>
    <BaseTable
      ref="refContentTable"
      :data="formData.vehicles"
      row-key="id"
      style="margin: 10px 0"
    >
      <TableColumn
        prop="vehicleNumber"
        :label="$t('fleet.vehicleNumber')"
        :column-width="columnWidthObj.vehicleNumber"
      >
        <template #default="{ $index }">
          <span>{{ $t('fleet.vehicle') }}{{ $index + 1 }}</span>
        </template>
      </TableColumn>
      <TableColumn
        prop="vehiclePlate"
        :label="$t('fleet.licensePlate')"
        :column-width="columnWidthObj.vehiclePlate"
      />
      <TableColumn
        prop="seatCount"
        :label="$t('fleet.loadCapacity')"
        :column-width="columnWidthObj.seatCount"
      />
      <TableColumn
        prop="status"
        :label="$t('fleet.vehicleStatus')"
        :column-width="columnWidthObj.status"
      >
        <template #default="{ row }">
          <span
            class="dot-status"
            :class="
              g_options.getOptionText(
                g_options.vehicleStatusOptions,
                row.status,
                '--',
                'class'
              )
            "
            >{{
              g_options.getOptionText(
                g_options.vehicleStatusOptions,
                row.status,
                '--'
              )
            }}</span
          >
        </template>
      </TableColumn>
      <TableColumn
        prop="regionCode"
        :label="$t('fleet.region')"
        :column-width="columnWidthObj.regionCode"
      >
        <template #default="{ row }">
          <span>{{ g_utils.getRegionName(row.regionCode) }}</span>
        </template>
      </TableColumn>
    </BaseTable>
    <el-descriptions
      v-loading="viewLoading"
      :column="2"
      border
      :label-width="140"
      style="margin-top: 10px"
    >
      <el-descriptions-item width="200">
        <template #label
          >{{ $t('fleet.amountBudget') }}({{ $t('fleet.yuan') }})</template
        >
        <span>{{ formData.customerBudget }}</span>
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('fleet.orderPayMethod') }}</template>
        <span>{{
          g_options.getOptionText(
            g_options.orderPayMethodOptions,
            formData.payType,
            '--'
          )
        }}</span>
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('fleet.emergencyContact') }}</template>
        {{ formData.customerEmergencyContact || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('fleet.emergencyContactPhone') }}</template>
        {{ formData.customerEmergencyContactPhone || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('fleet.orderStatus') }}</template>
        <span
          class="dot-status"
          :class="
            g_options.getOptionText(
              g_options.orderStatusOptions,
              formData.status,
              '--',
              'class'
            )
          "
          >{{
            g_options.getOptionText(
              g_options.orderStatusOptions,
              formData.status,
              '--'
            )
          }}</span
        >
      </el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <div class="detail-dialog-footer">
        <el-button plain @click="handleClose">{{
          $t('public.close')
        }}</el-button>
        <el-button
          v-if="type === 'confirm'"
          plain
          type="primary"
          @click="handleConfirm"
          >{{ $t('public.confirm') }}</el-button
        >
        <!-- <el-button type="primary" @click="handleExportPicture">{{
          $t('fleet.exportImage')
        }}</el-button>
        <el-button type="primary" @click="handleExportPDF">{{
          $t('fleet.exportPDF')
        }}</el-button> -->
      </div>
    </template>
  </BaseDialog>
</template>

<script setup>
const props = defineProps({
  type: {
    type: String,
    default: 'view' // view | confirm
  },
  id: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update'])
const dialogVisible = defineModel({
  type: Boolean,
  default: false
})
const title = computed(() =>
  props.type === 'confirm' ? g_t('fleet.carBookConfirm') : g_t('public.detail')
)
const viewLoading = ref(false)
const formData = ref({
  tripInfo: [],
  vehicles: []
})
const refTravelTable = ref(null)
const refContentTable = ref(null)
const columnWidthObj = ref({})
const travelColumnWidth = ref({})

watch(
  () => formData.value.vehicles,
  nv => {
    nextTick(() => {
      useTableColumnWidth({
        refTable: refContentTable.value
      }).getTableColumnWidth(data => {
        columnWidthObj.value = data
      })
    })
  },
  {
    immediate: true,
    deep: true
  }
)

watch(
  () => formData.value.tripInfo,
  nv => {
    nextTick(() => {
      useTableColumnWidth({
        refTable: refTravelTable.value
      }).getTableColumnWidth(data => {
        travelColumnWidth.value = data
      })
    })
  },
  {
    // immediate: true,
    deep: true
  }
)

onMounted(() => {
  getFormData()
})

const getFormData = () => {
  viewLoading.value = true
  g_api.fleet
    .apiOrderDetail({ id: props.id })
    .then(({ code, data }) => {
      if (code === '200' && data) {
        formData.value = data
      }
    })
    .finally(_ => {
      viewLoading.value = false
    })
}

const handleClose = () => {
  dialogVisible.value = false
}

const handleConfirm = () => {
  g_api.fleet.apiOrderConfirm({ id: props.id }).then(res => {
    if (res.code === '200') {
      ElMessage({
        message: res.message,
        type: 'success'
      })
      handleClose()
      emit('update')
    }
  })
}

// const handleExportPicture = () => {
//   //
// }

// const handleExportPDF = () => {
//   //
// }
</script>

<style scoped lang="scss"></style>
